<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
    <div id="header">
        <div class="container">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.php">书吧</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php">网站首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li  class="active"><a href="detail.html">图书展示</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="shopCar.html">购物车</a></li>
                        <li><a href="addBooks.html">添加图书</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div id="wrap">
        <div class="container">
            <!--<div class="col-xs-4">-->
                <!--<div class=" panel panel-default">-->
                    <!--<a href="detail.html">-->
                        <!--<img src="http://img11.360buyimg.com/n1/jfs/t2740/101/3129601330/88250/e329dc5c/5783238eN3c93cf2e.jpg" alt="">-->
                        <!--<h4 class="text-center">书香人和</h4>-->
                    <!--</a>-->
                    <!--<div class="buy">-->
                        <!--<span class="text-left">￥34.50</span>-->
                        <!--<button type="button" class="btn btn-success text-right">立即购买</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="col-xs-4">-->
                <!--<div class="panel panel-default">-->
                    <!--<a href="detail.html">-->
                        <!--<img src="http://img10.360buyimg.com/n1/jfs/t2800/164/3550534372/19024/9a4e638d/5793461dN032cf630.jpg" alt="">-->
                        <!--<h4 class="text-center">科学史研究论</h4>-->
                    <!--</a>-->
                    <!--<div class="buy">-->
                        <!--<span class="text-left">￥34.50</span>-->
                        <!--<button type="button" class="btn btn-success text-right">立即购买</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="col-xs-4">-->
                <!--<div class="panel panel-default">-->
                    <!--<a href="detail.html">-->
                        <!--<img src="http://img14.360buyimg.com/n1/jfs/t2764/232/3534978240/681170/100607e4/57934e52N8a2e5e2f.jpg" alt="">-->
                        <!--<h4 class="text-center">有限元方法</h4>-->
                    <!--</a>-->
                    <!--<div class="buy">-->
                        <!--<span class="text-left">￥34.50</span>-->
                        <!--<button type="button" class="btn btn-success text-right">立即购买</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="col-xs-4">-->
                <!--<div class=" panel panel-default">-->
                    <!--<a href="detail.html">-->
                        <!--<img src="http://img11.360buyimg.com/n1/jfs/t2740/101/3129601330/88250/e329dc5c/5783238eN3c93cf2e.jpg" alt="">-->
                        <!--<h4 class="text-center">书香人和</h4>-->
                    <!--</a>-->
                    <!--<div class="buy">-->
                        <!--<span class="text-left">￥34.50</span>-->
                        <!--<button type="button" class="btn btn-success text-right">立即购买</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="col-xs-4">-->
                <!--<div class="panel panel-default">-->
                    <!--<a href="detail.html">-->
                        <!--<img src="http://img10.360buyimg.com/n1/jfs/t2800/164/3550534372/19024/9a4e638d/5793461dN032cf630.jpg" alt="">-->
                        <!--<h4 class="text-center">科学史研究论</h4>-->
                    <!--</a>-->
                    <!--<div class="buy">-->
                        <!--<span class="text-left">￥34.50</span>-->
                        <!--<button type="button" class="btn btn-success text-right">立即购买</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="col-xs-4">-->
                <!--<div class="panel panel-default">-->
                    <!--<a href="detail.html">-->
                        <!--<img src="http://img14.360buyimg.com/n1/jfs/t2764/232/3534978240/681170/100607e4/57934e52N8a2e5e2f.jpg" alt="">-->
                        <!--<h4 class="text-center">有限元方法</h4>-->
                    <!--</a>-->
                    <!--<div class="buy">-->
                        <!--<span class="text-left">￥34.50</span>-->
                        <!--<button type="button" class="btn btn-success text-right">立即购买</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
<div id="footer">
    <div class="container text-center">
        <ul class="pagination pagination-lg">
            <li><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>

</div>
</body>
<script>
    $.ajax({
        type: 'post',
        url: 'list1.php',
        aysnc: true,
        dataType: 'json',
        success: function (data) {
            console.log(data);
            var length = Math.ceil(data.length/6);
            var html1 = '';
            for (var j = 0; j < length; j++) {
                html1 += "<li><span onclick='getData(this.innerHTML)'>" + (j + 1) + "</span></li>"
            }
            $('#footer .pagination').html(html1);
        }
    })//分页
    function getData(a){
        $.ajax({
            type: 'post',
            url: 'list.php',
            aysnc: true,
            dataType: 'json',
            data: {
                p: a,
            },
            success: function (data) {
                console.log(data.data);
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    console.log(data[i].id);
                    html += "<div class='col-xs-4'><div class='panel panel-default'><a href='detail.html?id="+data[i].id+"'><img src='"+data[i].file+"'><h4 class='text-center'>" + data[i].name + "</h4></a><div class='buy'><span class='text-left'>￥" + data[i].price + "</span><button type='button' class='btn btn-success text-right'>立即购买</button></div></div></div></div>"
                }
                $('#wrap .container').html(html);
            }
        })
    }
    getData(1);
</script>
</html>

